.align-center{
    position: absolute;
    top: 50%;
    left: 50%;
}

.device(@url, @w, @h, @t, @l){
    position: absolute;
    width: calc(@w / 3);
    height: calc(@h / 3);
    top: @t;
    left: @l;
    background: url(@url) no-repeat center center / contain;
}
.l-login{
    &-box{
        position: absolute;
        top: 48%;
        left: 900px;
        width: 300px;
        margin-top: -150px;
        border-radius: 2px;
        overflow: hidden;

        &-bg{
            position: absolute;
            z-index: -1;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: .2;
            background: linear-gradient(to top, #000102 0%, #002c3d 85%);
        }
    }

    &-title{
        height: 45px;
        line-height: 45px;
        font-size: 20px;
        font-weight: normal;
        color: #18afba;
        background-color: #fff;
        text-align: center;
        background: url('/static/img/login/login-title.png') no-repeat center top / cover;
    }

    &-link{
        line-height: 1;
        margin-bottom: 7px;
        text-align: center;

        &>a{
            color: #1aafb9;
        }
    }

    &-copyright{
        color: #615f5f;
        line-height: 1.4;
    }

    &-form{
        padding: 20px 15px;
        input:focus{
            outline: none!important;
            box-shadow: none!important;
        }

        .ivu-form-item{
            margin-bottom: 20px;
        }
        .ivu-input-wrapper{
            background: url('/static/img/login/login-input.png') no-repeat center / cover;
        }

        .ivu-input-group-prepend{
            width: 38px;
            border: 0;
            background-color: #18afba;
        }
        .ivu-input-group-prepend, .ivu-input-group>.ivu-input:first-child, .ivu-input-group>span>.ivu-input:first-child{
            border-radius: 4px!important;
        }

        .ivu-input{
            color: #fff;
            border: 0;
            background-color: transparent;
        }
    }
}

.l-wrap{
    overflow: hidden;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, #002c3d 0%, #000102 40%);
}

.l-container{
    display: flex;
    position: relative;
    width: 1200px;
    min-width: 1200px;
    height: 100%;
}

.l-img{
    width: 900px;
    height: 100%;

    &-left{
        position: relative;
        width: 500px;
        height: 100%;
    }

    &-right{
        .align-center;
        margin-top: -162px;
        left: 460px;
        width: 440px;
        height: 350px;
        background: url('/static/img/login/items.svg') no-repeat center center / contain;
    }

    &-device-1{
        .device('/static/img/login/device-1.png', 182px, 191px, 30px, 142px)
    }

    &-device-2{
        .device('/static/img/login/device-2.png', 144px, 152px, 150px, 100px)
    }

    &-device-3{
        .device('/static/img/login/device-3.png', 177px, 186px, 130px, 300px)
    }

    &-device-4{
        .device('/static/img/login/device-4.png', 190px, 208px, 230px, 195px)
    }

    &-device-5{
        .device('/static/img/login/device-5.png', 150px, 158px, 260px, 80px)
    }

    &-outline{
        .align-center;
        width: 500px;
        height: 500px;
        margin-top: -250px;
        margin-left: -250px;
        background: url('/static/img/login/outline.svg') no-repeat center center / contain;
    }

    &-outside{
        .align-center;
        width: 420px;
        height: 420px;
        margin-top: -210px;
        margin-left: -210px;
        transform-origin: center center;
        animation: rotate-util-dead 6s linear infinite;
        background: url('/static/img/login/outside.png') no-repeat center center / contain;
    }

    &-middle{
        .align-center;
        width: 300px;
        height: 300px;
        margin-top: -150px;
        margin-left: -150px;
        transform-origin: center center;
        animation: rotate-util-dead-opp 8s linear infinite;
        background: url('/static/img/login/middle.png') no-repeat center center / contain;
    }

    &-inside{
        .align-center;
        width: 200px;
        height: 200px;
        margin-top: -100px;
        margin-left: -100px;
        transform-origin: center center;
        animation: rotate-util-dead 14s linear infinite;
        background: url('/static/img/login/inside.png') no-repeat center center / contain;
    }

    &-brand{
        .align-center;
        width: 80px;
        height: 80px;
        margin-top: -40px;
        margin-left: -40px;
        background: url('/static/img/login/center.png') no-repeat center center / contain;
    }
}

@keyframes rotate-util-dead{
    from{
        transform: rotate(0)
    } to {
        transform: rotate(360deg)
    }
}

@keyframes rotate-util-dead-opp{
    from{
        transform: rotate(0)
    } to {
        transform: rotate(-360deg)
    }
}

.l-form{
    position: absolute;
    width: 22%;
    top: 0;
    bottom: 0;
    right: 0;
}

input:-webkit-autofill {
    animation: autofill-fix 10s infinite;
}

@keyframes autofill-fix {
    from {
        background: url('/static/img/login/login-input.png') no-repeat center / cover;
        color: #fff;
        outline: none;
    }
    to {
        background: url('/static/img/login/login-input.png') no-repeat center / cover;
        color: #fff;
        outline: none;
    }
}